/* jshint esversion: 6 */

const path = require('path');
//只要是插件，都要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');
//导入删除文件夹的插件
//const cleanPlugin = require('clean-webpack-plugin');
//导入webpack模块
const webpack = require('webpack');

//这个配置文件其实就是一个JS文件，通过Node中的模块操作，向外部暴露一个配置对象

module.exports = {
    mode: 'development',
    //指定输入文件
    entry: {
        app: path.join(__dirname, './src/main.js'), //项目主入口文件
        vendors: ['jquery'] //第三方包名称
    }, //项目入口文件
    //输出文件相关配置
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'index.js'
    },
    plugins: [
        //创建一个在内存中生成html的插件
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html' //指定生成页面名称
        }),
        //new cleanPlugin(['dist']) //指定每次重新发布要删除的文件夹
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warning: false //压缩完毕的代码中移除警告信息
            }
        }),
        //在项目全局配置一些全局变量，
        //将来引入第三方包会检查webpack中有无提供'process.env.NODE_ENV'字段
        //若有且字段名为"production"，就表示是生产发布环境，会移除不必要的VUE警告并做其他优化
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"',
            'myVar': '"1234"'
        })
    ],
    //用来配置非JS文件的对应loader的
    module: {
        //非JS文件和loader之间的对应关系
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //创建处理CSS文件的loader匹配规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理less文件的规则
            { test: /\.jpg|\.png|\.gif|\.bmp$/, use: 'url-loader?limit=2900&name=images/[hash:8]-[name].[ext]' }, //配置处理样式表中的图片的loader规则
            //可以使用？给url-loader传递参数，其中一个固定参数limit，表示图片大小，单位是byte字节
            //如果指定limit参数，则只有图片的大小小于给定的值时，才会转为base64格式的图片，否则不转换
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } //exclude排除不转换的包，打包时忽略node_modules下所有JS文件，否则无法运行
        ]
    }
};